/*
 * JQuery Plugin
 * @name: JOT 
 * @description: A non-intrusive template system for updating html content using javscript data set
 * @license: GPL V2
 * @author: William Yang
 * @created: 2010-04-6   
 * @examples:
  
        
    <!-- Embed data name using id attribute, you can 
    also use var if you need change element's attributes
    or you don't like repeating ids -->
    <div id="person">
        <!-- mapping written in JS object {attr_name: key_name}
            following IMG's src will be changed to data['avatar]
            alt will be changed to data['firstname']
        -->
        <img var="{src: 'avatar', alt: 'firstname'}">
        <!-- Simple mapping, id is the key name of the data you passed-->
        Name: <span id="firstname"></span>
        <u id="lastname"></u>
        Dob: <span id="dob"></span>
        
    </div>
	
	<script>
	person = {
	   firstname: 'William',
	   lastname: 'Yang',
	   dob: '1979-09-10',
	   avatar: 'me.jpg',
	}
	// Update above html block above with person
	$('#person > *').jot(person)
	</script>
	
	
	<!-- Treat template as a block -->
	<ul>
	   <li id="person_1">
            Name: <span id="firstname">William</span>
	        <u id="lastname">Yang</u>
	        Dob: <span var="dob">1979-09-10</span>
	   </li>
       <li id="person_2">
            Name: <span id="firstname">William</span>
            <u id="lastname">Yang</u>
            Dob: <span var="dob">1979-09-10</span>
       </li>	   
	</ul>
	
    <script>
    persons = [{
       firstname: 'William'
       lastname: 'Yang'
       dob: '1979-09-10'
    },
    {
       firstname: 'Unix'
       lastname: 'Timestamp'
       dob: '1970-01-01'
    }    
    ]
    // Update above html block above with person
	template = $("#person_1").html
    $('#person > *').jot_block({
                template: template,
                name: 'person',
                data: persons
            })
    </script>
		
 * 
 * 
 */

    $.fn.jot = function(options) {
        
         // build main options before element iteration
         var data = options
         // iterate and reformat each matched element
         return this.each(function() {
                        
           $this = $(this);
           //console.debug($this)
           // build element specific options
           id = $this.attr('id')
           if (data[id]) {
              $this.text(data[id])
              console.log('set text: ' + ' ' + id + ' to ' + data[id])  
           }
           // eval('var map=' + $this.attr('var'))
           if (map = $this.attr('var')) {
              console.debug('map ' + map)
              eval('map=' + map)
                $.each(map, function(key, value) { 
                     //console.log(key)
                     // $this.attr(key, data[value])
                     console.log('set text: ' + ' ' + key + ' to ' + data[value])
                });
              
            }
         });
        
    }
    
    $.fn.jot_block = function(options) {
        
         var data = options['data']
         console.log(data)
         var $this = $(this)
         $.each(data, function(key, val) {
            //console.log($this)
            $message = $this.find('#' + options['name'] + '_' + key)
            if ($message.length) {
                $message = $($message[0])
            } else {
                console.log('create a new block')
                $message = $(options['template'])
                $message.attr('id', options['name'] + '_' + key)
                $message.appendTo($this)
            }
            
            $($message.find('*')).each(function (index, element) {
                    $(element).jot(val)
                })
 
            
            
         })
         
    }